﻿<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>jQuery自定义添加或删除标签获取ID代码</title>

	<link rel="stylesheet" type="text/css" href="css/layui.css">
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			color: #444;
			background: #f2f2f2;
		}

		* {
			padding: 0;
			margin: 0;
			border: 0;
			list-style: none;
			text-decoration: none;
		}

		.wrap {
			width: 100%;
			max-width: 600px;
			margin: 0 auto;
		}

		.label-selected {
			width: 100%;
			min-height: 38px;
			margin: 10px 0;
			border: 1px solid #ccc;
			background-color: #fff;
			position: relative;
		}

		.cell {
			display: block;
			width: 90px;
			height: 28px;
			line-height: 28px;
			border: 3px;
			background: #009688;
			color: #fff;
			text-align: center;
		}

		.label-selected li {
			display: inline-block;
			height: 27px;
			line-height: 27px;
			font-size: .8rem;
			padding: 0 1rem;
			border: 1px solid #e6e6e6;
			border-radius: 2px;
			cursor: pointer;
			margin: 4px 2px;
			color: #666;
		}

		#labelItem {
			margin-bottom: 10px;
			display: none;
		}

		.label-item {
			border: 1px solid #e6e6e6;
			padding: 10px;
			border-radius: 0 2px 2px 0;
			position: relative;
			overflow: hidden;
			background: #fff;
		}

		.label-item li {
			display: inline-block;
			height: 27px;
			line-height: 27px;
			font-size: .8rem;
			padding: 0 1rem;
			border: 1px solid #e6e6e6;
			border-radius: 2px;
			cursor: pointer;
			margin-bottom: 5px;
			margin-left: 2px;
			color: #666;
		}

		.label-item .selected {
			color: #ccc;
		}

		.dadqqwe {
			display: none;
		}
	</style>

</head>

<body>
	<script src="/demos/googlegg.js"></script>

	<div class="wrap">
		<div class="label-selected">
			<a href="javascript:;" class="layui-btn layui-btn-sm show-labelitem"
				style="float: right; margin: 4px; display: block;line-height: 30px;">展开标签库 </a>
			<a href="javascript:;" class="layui-btn layui-btn-sm hide-labelitem"
				style="float: right; margin: 4px; display: none;line-height: 30px;">收起标签库 </a>
			<input type="hidden" name="label">

			<!-- <li data="32"><b>x</b><span>微博</span></li> -->

		</div>
		<div class="layui-col-md12">
			<!--标签库-->
			<div class="label-item">
				<a href="javascript:;" class="replacelable"
					style="position: absolute;right:1rem;bottom:.75rem;color: #1994dc"
					onselectstart="return false">换一批</a>
				<li data="2"><span>java 教程</span></li>
				<li data="16"><span>SEM</span></li>
				<li data="17"><span>SEM基础</span></li>
				<li data="6"><span>柚说</span></li>
				<li data="18"><span>关键词</span></li>
				<li data="19"><span>创意</span></li>
				<li data="10"><span>公众号</span></li>
				<li data="20"><span>排名</span></li>
				<li data="12"><span>网络营销</span></li>
				<li data="13"><span>SEM</span></li>
				<li data="14"><span>网络推广</span></li>
				<li data="15"><span>达内</span></li>
				<li data="21"><span>效果</span></li>
				<li data="22"><span>数据</span></li>
				<li data="23"><span>SEO</span></li>
				<li data="24"><span>DSP</span></li>
				<li data="25"><span>百度网盟</span></li>
				<li data="26"><span>百度DSP</span></li>
				<li data="27"><span>广点通</span></li>
				<li data="28"><span>智慧推</span></li>
				<li data="29"><span>粉丝通</span></li>
				<li data="30"><span>新媒体</span></li>
				<li data="31"><span>微信</span></li>
				<li data="32"><span>微博</span></li>
				<li data="33"><span>问答</span></li>
				<li data="34"><span>百科</span></li>
				<li data="35"><span>博客</span></li>
				<li data="36"><span>ASO</span></li>
				<li data="37"><span>网站</span></li>
				<li data="38"><span>着陆页</span></li>
				<li data="39"><span>网站分析</span></li>
				<li data="40"><span>电商</span></li>
			</div>
		</div>
		<a href="javascript:;" class="layui-btn" id="cell">获取</a>
	</div>
	<script>

		var btn = document.querySelector(".layui-btn"),
			labelItem = document.querySelector(".label-item"),
			labelSelected = document.querySelector(".label-selected")
		btn.addEventListener("click", function () {
			btn.innerHTML = btn.innerHTML === "展开标签库" ? "收起标签库 " : "展开标签库"
			labelItem.classList.toggle("dadqqwe")
		})

		var data = ["广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通", "广点通",]
		function render(arr) {
			labelItem.innerHTML = `<a href="javascript:;" class="replacelable"
					style="position: absolute;right:1rem;bottom:.75rem;color: #1994dc"
					onselectstart="return false">换一批</a>` + arr.map(function (item, index) {
				return `<li data="${index}"><span>${item}</span></li>`
			}).join("")
		}

		render(data)
		labelItem.addEventListener("click", function (e) {
			var tar = e.target;
			if (tar.nodeName === "SPAN") {
				var li = tar.parentNode.cloneNode(true)
				var b = document.createElement("b")
				b.innerHTML = "x"
				li.insertBefore(b, li.firstChild)
				labelSelected.appendChild(li)
			}
		})

		labelSelected.addEventListener("click", function (e) {
			var tar = e.target;
			if (tar.nodeName === "B") {
				tar.parentNode.parentNode.removeChild(tar.parentNode)
			}
		})

	</script>



</body>

</html>